<!--
 * @Description: 系统公告
 * @Author: xinqiao lxq1990.0716@qq.com
 * @Date: 2025-02-12
 * @LastEditors: xinqiao lxq1990.0716@qq.com
 * @LastEditTime: 2025-02-12
-->

<script lang="ts" setup>
  import { PlusOutlined } from '@ant-design/icons-vue'
  import { message, Modal } from 'ant-design-vue'
  import { onMounted, reactive } from 'vue'

  import { requestDeletePosition, requestPositionList } from '/@/api/business/company/position'
  import { HttpCodeEnum } from '/@/enums/httpEnum'
  import { useQueryPagination } from '/@/hooks/useQueryPagination'

  import Add from './components/Add.vue'
  import Edit from './components/Edit.vue'

  /** 搜索条件 */
  const searchParam = reactive({
    /** 发布日期 */
    publishTime: [],
    /** 关键字搜索 */
    keyword: '',
  })

  /** 表格列配置 */
  const columns = [
    { title: '消息标题', dataIndex: 'title' },
    { title: '消息内容', dataIndex: 'content' },
    { title: '发布人', dataIndex: 'publishName' },
    { title: '状态', key: 'status' },
    { title: '操作时间', dataIndex: 'actionTime' },
    { title: '操作', key: 'action' },
  ]

  const { loading, queryList, dataList, pagination, onPaginationChange } = useQueryPagination<PositionListTypes.IRequest, PositionListTypes.IResponse[]>(searchParam, requestPositionList) //TODO

  // TODO
  setTimeout(() => {
    dataList.value = [
      { title: '新增币种1', content: '新增币种eth', publishName: 'admin', status: 0, actionTime: '2024/10/09 10:09:09' },
      { title: '新增币种2', content: '新增币种eth', publishName: 'admin', status: 0, actionTime: '2024/10/09 10:09:09' },
      { title: '新增币种3', content: '新增币种eth', publishName: 'admin', status: 1, actionTime: '2024/10/09 10:09:09' },
      { title: '新增币种4', content: '新增币种eth', publishName: 'admin', status: 0, actionTime: '2024/10/09 10:09:09' },
      { title: '新增币种5', content: '新增币种eth', publishName: 'admin', status: 1, actionTime: '2024/10/09 10:09:09' },
      { title: '新增币种6', content: '新增币种eth', publishName: 'admin', status: 0, actionTime: '2024/10/09 10:09:09' },
      { title: '新增币种7', content: '新增币种eth', publishName: 'admin', status: 0, actionTime: '2024/10/09 10:09:09' },
      { title: '新增币种8', content: '新增币种eth', publishName: 'admin', status: 1, actionTime: '2024/10/09 10:09:09' },
      { title: '新增币种9', content: '新增币种eth', publishName: 'admin', status: 1, actionTime: '2024/10/09 10:09:09' },
      { title: '新增币种10', content: '新增币种eth', publishName: 'admin', status: 0, actionTime: '2024/10/09 10:09:09' },
    ]
  }, 1500)

  onMounted(() => queryList())

  /**
   * 重置
   */
  const clear = () => {
    searchParam.publishTime = []
    searchParam.keyword = ''
  }

  /**
   * 搜索
   */
  const search = async () => queryList({ current: 1 })

  /** 新增弹窗 */
  const modalAdd = reactive({
    visible: false,
    success: () => queryList({ current: 1 }),
  })

  /**
   * 新增
   */
  const add = () => (modalAdd.visible = true)

  /** 编辑弹窗 */
  const modalEdit = reactive({
    visible: false,
    positionId: NaN,
    positionName: '',
    success: () => queryList(),
  })

  /**
   * 编辑
   * @param record 职位
   */
  const edit = (record: PositionListTypes.IResponse) => {
    modalEdit.visible = true
    modalEdit.positionId = record.positionId
    modalEdit.positionName = record.positionName
  }

  /**
   * 删除
   * @param record 职位
   */
  const dele = (record: PositionListTypes.IResponse) => {
    Modal.confirm({
      title: '删除',
      content: '删除当前岗位，需确定岗位下没有相关人员。如果有对应的人员，请在「组织人员」中进行移除。',
      okText: '确定删除',
      onOk: async () => {
        const { responseCode } = await requestDeletePosition({ positionId: record.positionId })
        if (responseCode === HttpCodeEnum.SUCCESS) {
          message.success('删除成功')
          queryList()
        }
      },
    })
  }
</script>

<template>
  <div class="ssc-list notice-list">
    <div class="ssc-search">
      <a-row :gutter="24">
        <a-col :span="6">
          <a-form-item label="发布日期">
            <a-range-picker v-model:value="searchParam.publishTime" format="YYYY-MM-DD" valueFormat="YYYY-MM-DD" />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="关键字搜索">
            <a-input v-model:value="searchParam.keyword" @press-enter="queryList" allowClear placeholder="请输入关键字搜索" :maxlength="20" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-row justify="end">
            <a-button @click="clear()">重置</a-button>
            <a-button class="ml-4" type="primary" @click="search()">查询</a-button>
          </a-row>
        </a-col>
      </a-row>
    </div>
    <div class="ssc-table">
      <div class="ssc-table-header">
        <span class="ssc-table-header-title">系统公告</span>
        <a-button type="primary" @click="add()">
          <template #icon><plus-outlined :style="{ 'font-weight': 'bold' }" /></template>
          新建
        </a-button>
      </div>
      <a-table :columns="columns" :data-source="dataList" :loading="loading" :pagination="pagination" @change="onPaginationChange">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'status'">
            <span>
              <a-tag v-if="record.status === 0" color="red">待发布</a-tag>
              <a-tag v-if="record.status === 1" color="green">已发布</a-tag>
            </span>
          </template>
          <template v-else-if="column.key === 'action'">
            <span>
              <a @click="edit(record)">编辑</a>
              <a-divider type="vertical" />
              <a class="color-error" @click="dele(record)">删除</a>
            </span>
          </template>
        </template>
      </a-table>
    </div>
    <div class="modal">
      <Add v-model:visible="modalAdd.visible" @success="modalAdd.success" />
      <Edit v-model:visible="modalEdit.visible" :position-id="modalEdit.positionId" :position-name="modalEdit.positionName" @success="modalEdit.success" />
    </div>
  </div>
</template>

<style lang="less" scoped></style>
